<template>
  <div class="recommend-page">
    <div class="recommend-tab">
      <a :class="{ active: activeTab == 0 }" @click="changeTab(0)">专属私人灵感</a>
      <a :class="{ active: activeTab == 1 }" @click="changeTab(1)">最新发布</a>
      <a class="change-random-btn" @click="handleChange">换一换</a>
    </div>
    <div class="img-datas">
      <WaterfallFlowImgList id="1" ref="refWaf" :list="list" :defaultw="414" :columns="6"/>

      <div class="pro-bot-loading" v-if="isloading">
          <i class="el-icon-loading"></i>
      </div>
      <Empty class="recommend-empty" v-if="list.length==0&&!isloading&&!isDataError">
        <div class="custom-empty" v-if="activeTab==0">
          <span>开始浏览游戏、截图，喜欢并收藏~</span>
          <span>让推荐更懂你的品味</span>
          <div class="btns">
            <a href="/screenshots">去看截图</a>
            <a href="/games">去看游戏</a>
          </div>
        </div>
        <div v-else>空空如也~</div>
      </Empty>
      <div class="web-data-error" v-if="isDataError">
        <div class="tip-text">别走开刷新一下，有所爱才有所期待～</div>
        <div class="options">
            <a class="go-back" href="/">返回首页</a>
            <a class="click-refresh" @click="isDataError=false;handleSearch();">点击刷新</a>
        </div>
    </div>
    </div>
  </div>
</template>

<script>
import { mapState} from 'vuex'
import Empty from '@/components/Empty'
import WaterfallFlowImgList from '@/components/WaterfallFlowImgList'
// import Waterfall from 'vue-waterfall/lib/waterfall'
// import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
import api from '@/api/api'
export default {
  data() {
    return {
      scrollLoaded:true,
      hasMore:true,
      isDataError:false,
      isloading:true,
      collectIds: [],
      activeTab: 0,
      list: [],
      pageNum: 1,
      queryParams: {
        pageNum: 1,
        pageSize: 60,
        // rank: '首页推荐',
        color: '',
        categoryId: 22
      }
    }
  },
  components: {
    // Waterfall,
    // WaterfallSlot, 
    WaterfallFlowImgList,Empty
  },
  computed:{
    ...mapState(['ishiddenbar'])
  },
  watch: {
      ishiddenbar(){
          let that=this;
          setTimeout(()=>{
              that.$refs['refWaf'].initLineGap();
          },150)
      }
  },
  destroyed() {
    window.removeEventListener('scroll',this.docScroll);
  },
  methods: {
    handleSearch(){
      this.changeTab(this.activeTab);
    },
    changeTab(_tab) {
      this.queryParams.last=''
      this.isDataError=false;
      this.activeTab = _tab;
      this.pageNum = 1;
      this.queryList()
    },
    handleChange() {
      this.list=[];
      this.queryParams.pageNum++
      this.queryList()
    },
        calculateTilt(corners){
            const{x:x1,y:y1}=corners[0];//左上
            const{x:x2,y:y2}=corners[1];// 右上
            // 计算 dy 和 dx
            const dy=y2-y1;
            const dx=x2-x1;
            //计算倾角(弧度->角度)
            const angle =Math.atan2(dy,dx)*(180 /Math.PI);
            // 返回角度
            return angle;
        },
    queryList() {
      let that = this;
      this.isloading=true;
      
      if(this.activeTab==0){
        this.queryParams.interest=localStorage.getItem('userId');
        this.queryParams.orderByColumn='';
        this.queryParams.isAsc='';
      }else{
        this.queryParams.interest='';
        this.queryParams.orderByColumn='create_time';
        this.queryParams.isAsc='DESC';
      }
      if(this.queryParams.pageNum==1){
        // this.list=this.$bhelper.vlist;
      }
      api.searchImgs(this.queryParams).then(res=>{
          // loading.close();
          let datas=res.data.images.list;
          datas.map(item => {
            item.show=false;item.showOther=false;
            that.$bhelper.convertImgItem(item,that);
          })
          if(datas.length>0)
            that.queryParams.last=datas[datas.length-1].id;
          
          if(that.queryParams.pageNum==1){
            that.list=datas;
          }
          else{
            that.list = [...this.list,...datas];
          }
          that.hasMore=true;

          setTimeout(()=>{
              that.isloading = false;
          },300)
          setTimeout(()=>{
              that.scrollLoaded = true;
          },1000)
        }).catch(res=>{
          that.list=[];
          that.isloading=false;
          that.isDataError=true;
          // loading.close();
        })
    },
    loadMore(){
      this.queryParams.pageNum++;
      this.queryList();
    },
    docScroll(){
      let that=this;
      let jHeight = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight

      if (that.scrollLoaded == false) return;
      if (jHeight <= 1000 && that.hasMore) {
          that.scrollLoaded = false;
          that.loadMore();
      }
    }
  },
  async mounted() {
    let token = window.localStorage.getItem('token')
    if(!token){
      this.$parent.showLoginView=true;
      return;
    }
    this.queryList();
    
    window.addEventListener('scroll',this.docScroll)
  }
}
</script>

<style lang="less">
.item-move {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  -webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

.recommend-page {
  .recommend-tab {
    font-size: 24px;
    color: #969696;
    line-height: 37px;
    height: 37px;
    position: relative;
    a {
      position: relative;
      transition:.2s all linear;
      &:first-child {
        margin-right: 30px;
      }

      &.active {
        color: #fff;
        font-size: 26px;
        &:after{
            content:'';
            height:2px;
            background:#11CCB1;
            width:24px;
            position: absolute;
            bottom:-4px;
            left:calc((100% - 24px) / 2);
        }
      }
    }

    .change-random-btn {
      font-size: 12px;
      color: #848393;
      position: absolute;
      right: 20px;

      cursor: pointer;
      line-height: 24px;
      // width:67px;

      padding-left: 26px;
      padding-right: 5px;
      text-align: center;
      border-radius: 4px;
      user-select: none;

      background-color: #1D1D1F;
      background-image: url('../assets/pro/random_btn.svg');
      background-repeat: no-repeat;
      background-size: 14px 14px;
      background-position: 8% center;
      &:active{
        opacity:.8;
      }
    }
  }

  .img-datas {
    margin-top: 21px;
  }
}
</style>